<template>
  <div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll">
    <div class="scroll-wrapper" ref="scrollWrapper" :style="{ top: top + 'px' }">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const delta = 15
defineOptions({
  name: 'ScrollBar',
})
const scrollContainer = ref(null)
const scrollWrapper = ref(null)
const top = ref(0)
function handleScroll(e) {
  const eventDelta = e.wheelDelta || -e.deltaY * 3
  const containerHeight = scrollContainer.value.offsetHeight
  const wrapperHeight = scrollWrapper.value.offsetHeight
  if (eventDelta > 0) {
    top.value = Math.min(0, top.value + eventDelta)
  } else {
    if (containerHeight - delta < wrapperHeight) {
      if (top.value < -(wrapperHeight - containerHeight + delta)) {
        top.value = top.value
      } else {
        top.value = Math.max(top.value + eventDelta, containerHeight - wrapperHeight - delta)
      }
    } else {
      top.value = 0
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../styles/variables.scss';

.scroll-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: $menuBg;

  .scroll-wrapper {
    position: absolute;
    width: 100% !important;
  }
}
</style>
